import { FC } from 'react'

import WordHScroll from '../WordHScroll'

// import WordHScroll from "../../../../Components/WordHScroll"

type ProportionDataBoxProps = {
  value: number
  label: string
  color: string
}
const LengedDataBox: FC<ProportionDataBoxProps> = ({ value, label, color }) => {
  return (
    <div style={{ display: 'flex' }}>
      <div
        className="dr_label"
        style={{
          fontSize: 14,
          fontFamily: 'ZQKHY',
          width: 45,
          minWidth: 45,
          padding: '2px 0',
          lineHeight: '16px',
          boxSizing: 'border-box',
          textAlign: 'left',
          color: color
        }}
      >
        <span>{value}</span>
        <span style={{ fontFamily: 'DIN-Bold', fontSize: 10, color: color }}>
          %
        </span>
      </div>
      <div
        title={label}
        className="dr_label"
        style={{
          padding: '2px 0',
          fontSize: 12,
          marginLeft: 10,
          lineHeight: '16px',
          // maxWidth: 125,
          width: 80,
          paddingRight: 10,
          boxSizing: 'border-box',
          textAlign: 'left',
          overflow: 'hidden',
          whiteSpace: 'nowrap'
        }}
      >
        {/* NOTE: 注意
        这个 WordHScroll组件的引入路径，因为如果之前外面Components下的 WordHScroll，轮播滚动时，文本滚动不会生效
        暂时还不清楚什么原因导致的，先这么处理
         */}
        {label && (
          <WordHScroll>
            <span>{label}</span>
          </WordHScroll>
        )}
      </div>
    </div>
  )
}
export default LengedDataBox
